<template>
  <div
      class="tw-w-580 tw-pt-25 border-box tw-bg-white tw-px-20 tw-py-24 border-box tw-h-326 "
  >
    <div class="flex-middle font-normal tw-mb-20">
      <span class="tw-w-3 bg-color-theme tw-h-16 tw-mr-10"></span>
      <span class="text-[#171920] font-bold"> 免费资料 </span>
    </div>
    <ul class="width100 free-doc tw-h-233 tw-overflow-auto element">
      <li
          v-for="(item, index) in freeDocList"
          :key="item.id"
          class="flex-between-center width100  click tw-h-42"
          @click="goNewsInfo(item)"
      >
        <div class="flex-middle " >
          <p class="square-black tw-rounded-full"></p>
          <span class="tw-ml-8 one-line tw-max-w-420 go-links tw-text-[#171920] font-small">{{
              item.title
            }}</span>
        </div>
        <div
            class="btn-white color-theme dow-doc flex-middle"
            style="font-size: 12px; width: 74px; height: 24px;line-height: 26px"
        >
          下载
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
defineProps({
  freeDocList: {
    type: Array,
    default: [],
  },
});
const emit = defineEmits(["goNewsInfo"]);
const goNewsInfo = (item) => {
  emit("goNewsInfo", {id: item.id, type: 1});
};
</script>

<style lang="scss" scoped>
.free-doc :hover .go-links {
  color: #04addb;
}

.free-doc :hover .dow-doc {
  background: #dfedfb;
  color: #04addb;
}
.element {
  padding-right: 8px;
  box-sizing: border-box;
  scrollbar-width: thin; /* Firefox */
  -ms-overflow-style: none; /* IE 和 Edge */
}
/* WebKit 浏览器（如 Chrome 和 Safari） */
.element::-webkit-scrollbar {
  width: 4px; /* 滚动条宽度 */
}

.element::-webkit-scrollbar-track {
  background: #f1f1f1; /* 滚动条轨道背景颜色 */
}

.element::-webkit-scrollbar-thumb {
  background: #888; /* 滚动条拇指背景颜色 */
  border-radius: 2px; /* 滚动条拇指圆角 */
}

.element::-webkit-scrollbar-thumb:hover {
  background: #555; /* 滚动条拇指悬停时的背景颜色 */
}
</style>
